.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: rem(48);
  padding: 0 rem(30);
  background-color: var(--a-mainBg);
  z-index: 5;

  &.mobile {
    justify-content: flex-end;
  }

  &__mobile {
    &-toggle {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: rem(20);
      height: rem(20);
      margin-left: rem(20);
    }

    &-menu {
      position: absolute;
      top: rem(33);
      right: rem(-30);
      display: flex;
      flex-direction: column;
      min-width: rem(100);
      min-height: rem(100);
      padding: rem(30);
      background-color: var(--a-mainBg);
      border-radius: var(--a-borderR--x6);
    }
  }

  &__toggle-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    span {
      position: relative;
      width: 100%;
      height: rem(2);
      background-color: var(--a-mainText);

      &::before,
      &::after {
        position: absolute;
        content: '';

        left: 0;
        width: 100%;
        height: rem(2);
        background-color: var(--a-mainText);
      }

      &::before {
        top: rem(-5);
      }
      &::after {
        top: rem(5);
      }
    }

    &.active {
      span {
        height: 0;

        &::before,
        &::after {
          position: absolute;
          content: '';

          left: 0;
          width: 100%;
          height: rem(2);
          background-color: var(--a-mainText);
        }

        &::before {
          top: rem(-1);
          transform: rotate(45deg);
        }
        &::after {
          top: rem(-1);
          transform: rotate(-45deg);
        }
      }
    }
  }

  &__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    &-list {
      display: flex;
      justify-content: center;
      align-items: center;

      &--mob {
        flex-direction: column;
      }
    }
  }

  &__item {
    margin: 0 rem(10);
    color: var(--a-mainText);
    text-transform: uppercase;
    user-select: none;

    &:hover {
      color: var(--a-mainAccent);
    }

    &.router-link-exact-active {
      color: var(--a-mainAccent);
    }

    &-mob {
      padding: rem(4) 0;
      list-style: none;
      color: var(--a-mainText);

      .router-link-exact-active {
        color: var(--a-mainAccent);
      }
    }
  }

  &__block {
    display: flex;
  }

  &__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: rem(40);
    height: rem(40);
    margin-right: rem(8);

    .nuxt-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: rem(24);
      height: rem(24);
    }
  }

  &__lang {
    display: flex;
    justify-content: center;
    align-items: center;
    width: rem(40);
    height: rem(40);
    color: var(--a-accentText);
    text-transform: uppercase;
    background-color: var(--a-bgLight);
  }

  &__mode {
    color: var(--a-mainText);
    &:hover {
      color: var(--a-accentText);
    }
  }
}



